<template>

    <el-row>
        <el-col :span="4">
            <el-input v-model="query.caseNumber" placeholder="输入病历号"></el-input>
        </el-col>
        <el-col :span="4">
            <el-button @click="getByPage">搜索</el-button>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="4">
            <el-select v-model="updateForm.payMethod" placeholder="支付方式">
                <el-option label="现金" value="现金" />
                <el-option label="银行卡" value="银行卡" />
                <el-option label="微信" value="微信" />
                <el-option label="医保卡" value="医保卡" />
                <el-option label="支付宝" value="支付宝" />
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-select v-model="updateForm.settleCategoryId" placeholder="结算方式">
                <el-option v-for="sg in settlecategorysList" 
                    :key="sg.id"
                    :label="sg.settleName" 
                    :value="sg.id" />
            </el-select>
        </el-col>
        <el-col :span="4">
            <div>总金额：{{sumprice}}</div>
        </el-col>
        <el-col :span="4">
            <el-button @click="paymany">确认支付</el-button>
        </el-col>
    </el-row>

    <!-- 表格前面应该提供了，禁选的状态，当状态等于1的时候，禁止选中 -->
    <el-row>
        <el-col :span="24">
            <el-table :data="pb.records" 
		          stripe 
				  border
				  @selection-change="handleSelectionChange">
                  <!-- 绑定属性方法 -->
                    <el-table-column type="selection" :selectable="selectableRow" width="55" />
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="costname" label="项目名称" width="180" />
                    <el-table-column prop="costtype" label="项目类型" width="100"/>
                    <el-table-column prop="costprice" label="价格" width="100"/>
                    <el-table-column prop="number" label="数量" width="80"/>
                    <el-table-column prop="createtime" label="创建时间"/>
                    <el-table-column label="状态" width="100">
                        <template #default="{row}">
                            <span v-if="row.state==0">未支付</span>
                            <span v-else-if="row.state==1">已支付</span>
                        </template>
                    </el-table-column>
		</el-table>
        </el-col>
    </el-row>
    <!-- 分页组件 -->
	<el-row>
	  <el-col :span="6"></el-col>
	  <el-col :span="12">
		   <el-pagination
		        v-model:current-page="query.current"
		        v-model:page-size="query.size"
		        :page-sizes="[5, 8, 10, 20]"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="pb.total"
		        @size-change="getByPage"
		        @current-change="getByPage"
		      />
	  </el-col>
	  
	</el-row>  
</template>

<script setup>
import { ElMessage } from 'element-plus';
import httpRequest from '../../common/index.js';
import { onMounted, ref, getCurrentInstance, computed } from 'vue';

const {proxy} = getCurrentInstance();

const query = ref({
    current: 1,
    size: 5,
    caseNumber: ''
})

const pb = ref({
    total: 0,
    pages: 0,
    records: []
});

//查询需要进行的检查  状态是已缴费的
const getByPage = ()=>{
    httpRequest(
        proxy,
        'post',
        '/cost/page',
        query.value,
        resultBean=>{
            pb.value = resultBean.data;
        }
    )
}

const updateForm = ref({
    payMethod: '',
    settleCategoryId: null,
    state: 1,
    ids : []
})


 //存放结算类别的集合
 const settlecategorysList = ref([])

 //查询所有的结算类别
 const getSettlecategory = ()=>{
    httpRequest(
        proxy,
        'get',
        '/settlecategory/all',
        null,
        resultBean=>{
            settlecategorysList.value = resultBean.data
        }
    )
 }
    const selectableRow=(row,index)=>{
       return row.state==0;
    }

 //选中项的id集合
let selectOptions = ref([]);
  
//表格中多选框选中或取消时会触发  也就是选中项变化
const handleSelectionChange = (newSelection)=>{
    console.log('选中项改变',newSelection);
    selectOptions.value = []; //清空
    newSelection.forEach((selOp)=>{
        console.log(selOp);
        selectOptions.value.push(selOp);
    });
}

const sumprice = computed(()=>{
    let sum = 0;
    selectOptions.value.forEach(cost=>{
        sum += cost.costprice*cost.number;
    })
    return sum;
})

const paymany = ()=>{
    selectOptions.value.forEach(op=>{
        updateForm.value.ids.push(op.id);
    })

    httpRequest(
        proxy,
        'post',
        '/cost/pay',
        updateForm.value,
        resultBean=>{
            ElMessage.success('支付成功');
            getByPage();
        }
    )
}

onMounted(()=>{
    getByPage();
    getSettlecategory();
})

</script>

<style>
</style>